<!--  -->
<template>
  <base-modal :title="title" :show.sync="visible" width="700px">
    <div class="dialog-main">
      <el-input v-model="editData" :placeholder="oldData"></el-input>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="confirm">{{$t('common.base.confirm')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import * as SettingApi from "@src/api/SettingApi.ts";

export default {
  data() {
    return {
      visible: false,
      title: "",
      editData: "",
      mode: "",
      oldData: "",
    };
  },
  props: {
    rowData: {
      type: String,
      default: "",
    },
  },
  watch: {
    rowData(newValue, _) {
      this.editData = newValue;
    },
  },
  methods: {
    openDialog(mode, data) {
      this.mode = mode;
      this.oldData = data;
      this.editData = data;

      if (mode === "unit") {
        this.title = this.$t('servicePrice.setting.title2');
      } else {
        this.title = this.$t('servicePrice.setting.title3');
      }
      this.visible = true;
    },

    confirm() {
      if (!this.editData.length) {
        return this.$message({
          showClose: true,
          duration: 3000,
          message: this.mode === 'unit' ? this.$t('servicePrice.setting.tip5') : this.$t('servicePrice.setting.tip6'),
          type: "error",
        });
      }

      if (this.mode === "unit") {
        this.unitupdate();
      } else {
        this.typeupdate();
      }
    },

    async unitupdate() {
      try {
        let newArr = this.$parent.unitsArr;
        const isRepeat = newArr.includes(this.editData);
        if (isRepeat) {
          return this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('servicePrice.setting.tip7'),
            type: "error",
          });
        }

        newArr.splice(newArr.indexOf(this.oldData), 1, this.editData);
        const params = {
          oldVal: this.oldData,
          newVal: this.editData,
          data: newArr,
        };
        const result = await SettingApi.editServiceUnit(params);
        if (result.succ) {
          this.visible = false;
          this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('common.base.tip.edit2Success'),
            type: "success",
          });

          this.$parent.getServiceUnits();
        } else {
          this.$message({
            showClose: true,
            duration: 1500,
            message: result.message,
            type: "error",
          });
        }
      } catch (error) {
        console.error("update unit error", error);
      }
    },

    async typeupdate() {
      try {
        if (this.editData === "无") {
          return this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('servicePrice.setting.tip4'),
            type: "error",
          });
        }

        let newArr = this.$parent.typesArr;
        const isRepeat = newArr.includes(this.editData);
        if (isRepeat) {
          return this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('servicePrice.setting.tip7'),
            type: "error",
          });
        }

        newArr.splice(newArr.indexOf(this.oldData), 1, this.editData);
        const params = {
          oldVal: this.oldData,
          newVal: this.editData,
          data: newArr,
        };
        const result = await SettingApi.editServiceItemsType(params);
        if (result.succ) {
          this.visible = false;
          this.$message({
            showClose: true,
            duration: 1500,
            message: this.$t('common.base.tip.edit2Success'),
            type: "success",
          });

          this.$parent.getServiceTypes();
        } else {
          this.$message({
            showClose: true,
            duration: 1500,
            message: result.message,
            type: "error",
          });
        }
      } catch (error) {
        console.error("update type error", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-main {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px;
}
</style>
